<template>
	<view class="MainBox">
		<view class="topBar">
			  <view :class="['tab-item', { active: serviceTabs === 'all' }]" @click="switchTab('all')">全部</view>
			  <view :class="['tab-item', { active: serviceTabs === 'toDoItems' }]" @click="switchTab('toDoItems')">待办项</view>
			  <view :class="['tab-item', { active: serviceTabs === 'InProgress' }]" @click="switchTab('InProgress')">进行中</view>
			  <view :class="['tab-item', { active: serviceTabs === 'completed' }]" @click="switchTab('completed')">已完成</view>
		</view>
		
		<scroll-view class="service-content" scroll-y>
			<view class="service-list">
				<view 
					v-for="(item, index) in filteredServices" 
					:key="index" 
					class="service-item"
					:class="getStatusClass(item.status)"
				>
					<view class="service-header">
						<view class="service-title">{{ item.title }}</view>
						<view class="service-time">{{ item.time }}</view>
					</view>
					<view class="service-desc">{{ item.desc }}</view>
					<view class="service-footer">
						<view class="service-status">{{ getStatusText(item.status) }}</view>
						<view class="service-actions">
							<button v-if="item.status === 'todo'" class="btn-start" @click="startService(item)">开始</button>
							<button v-if="item.status === 'progress'" class="btn-complete" @click="completeService(item)">完成</button>
							<button class="btn-detail" @click="viewDetail(item)">详情</button>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	
		<view class="bottom-nav">
			<navigator url="/pages/volunteerInterface/service" class="nav-item active">
				<image src="/static/images/regularUser/home-s.png" class="nav-icon"></image>
				<text>服务</text>
			</navigator>
			<navigator url="/pages/volunteerInterface/process" class="nav-item active">
				<image src="/static/images/regularUser/home-s.png" class="nav-icon"></image>
				<text>进程</text>
			</navigator>
			<navigator url="/pages/volunteerInterface/messages" class="nav-item active">
				<image src="/static/images/regularUser/home-s.png" class="nav-icon"></image>
				<text>消息</text>
			</navigator>
			<navigator url="/pages/volunteerInterface/me" class="nav-item active">
				<image src="/static/images/regularUser/my.png" class="nav-icon"></image>
				<text>我的</text>
			</navigator>
		</view>
	</view>
</template>

<script>
export default {
		data() {
			return {
				activeTab: 'all',
				services: [
					{
						id: 1,
						title: "社区探访",
						desc: "为独居老人提供上门探访服务，了解生活状况并提供必要帮助",
						time: '11-05 14:00',
						status: 'todo'
					},
					{
						id: 2,
						title: "节日慰问",
						desc: "节日期间为老人送去关怀和慰问品，传递温暖",
						time: '11-10 09:30',
						status: 'progress'
					},
					{
						id: 3,
						title: "社区清洁",
						desc: "参与社区环境整治，清理公共区域卫生",
						time: '11-07 08:00',
						status: 'completed'
					},
					{
						id: 4,
						title: "健康讲座",
						desc: "为社区居民开展健康知识普及讲座",
						time: '11-13 15:00',
						status: 'todo'
					},
					{
						id: 5,
						title: "物资分发",
						desc: "协助社区分发爱心物资给需要帮助的家庭",
						time: '11-09 10:00',
						status: 'progress'
					}
				]
			}
		},
		computed: {
			filteredServices() {
				if (this.activeTab === 'all') {
					return this.services;
				}
				const statusMap = {
					'toDoItems': 'todo',
					'InProgress': 'progress', 
					'completed': 'completed'
				};
				return this.services.filter(item => item.status === statusMap[this.activeTab]);
			}
		},
		methods: {
			switchTab(tab) {
				this.activeTab = tab;
			},
			getStatusClass(status) {
				return {
					'todo': 'status-todo',
					'progress': 'status-progress',
					'completed': 'status-completed'
				}[status];
			},
			getStatusText(status) {
				return {
					'todo': '待开始',
					'progress': '进行中',
					'completed': '已完成'
				}[status];
			},
			startService(item) {
				uni.showModal({
					title: '确认开始',
					content: `确定要开始"${item.title}"服务吗？`,
					success: (res) => {
						if (res.confirm) {
							item.status = 'progress';
							uni.showToast({
								title: '服务已开始',
								icon: 'success'
							});
						}
					}
				});
			},
			completeService(item) {
				uni.showModal({
					title: '确认完成',
					content: `确定要完成"${item.title}"服务吗？`,
					success: (res) => {
						if (res.confirm) {
							item.status = 'completed';
							uni.showToast({
								title: '服务已完成',
								icon: 'success'
							});
						}
					}
				});
			},
			viewDetail(item) {
				uni.navigateTo({
					url: `/pages/volunteerInterface/serviceDetail?id=${item.id}`
				});
			}
		}
	}
</script>

<style scoped>
	.MainBox{
		top:20px;
		background: linear-gradient(135deg, #FFF8F2 0%, #FFF0E6 100%);
		color: #333;
		font-size: 16px;
	}
	
	/* 顶部选项卡样式 */
	.topBar {
		display: flex;
		background: white;
		border-bottom: 1px solid #f0f0f0;
		padding: 0 20px;
	}
	
	.tab-item {
		flex: 1;
		text-align: center;
		padding: 20rpx 0;
		font-size: 14px;
		color: #666;
		position: relative;
		transition: all 0.3s;
	}
	
	.tab-item.active {
		color: #f57f17;
		font-weight: bold;
	}
	
	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 60%;
		height: 4rpx;
		background: #f57f17;
		border-radius: 2rpx;
	}
	
	/* 服务内容区域 */
	.service-content {
		height: calc(100vh - 200rpx);
		padding: 20rpx;
	}
	
	.service-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}
	
	.service-item {
		background: white;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
		transition: all 0.3s;
	}
	
	.service-item:hover {
		transform: translateY(-4rpx);
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
	}
	
	.service-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 20rpx;
	}
	
	.service-title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
		flex: 1;
	}
	
	.service-time {
		font-size: 12px;
		color: #999;
		background: #f8f8f8;
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
	}
	
	.service-desc {
		font-size: 14px;
		color: #666;
		line-height: 1.6;
		margin-bottom: 30rpx;
	}
	
	.service-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.service-status {
		font-size: 12px;
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
	}
	
	.status-todo .service-status {
		background: #fff3e0;
		color: #f57f17;
	}
	
	.status-progress .service-status {
		background: #e8f5e8;
		color: #4caf50;
	}
	
	.status-completed .service-status {
		background: #f5f5f5;
		color: #9e9e9e;
	}
	
	.service-actions {
		display: flex;
		gap: 10rpx;
	}
	
	.service-actions button {
		padding: 12rpx 24rpx;
		font-size: 12px;
		border-radius: 20rpx;
		border: none;
	}
	
	.btn-start {
		background: #f57f17;
		color: white;
	}
	
	.btn-complete {
		background: #4caf50;
		color: white;
	}
	
	.btn-detail {
		background: #f5f5f5;
		color: #666;
	}
	
	/* 底部导航样式*/
	.bottom-nav {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 80px;
		background-color: white;
		position: fixed;
		bottom: 0;
		width: 100%;
		color: black;
		padding: 0 20px;
	}

	.nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 14px;
	}

	.nav-item.active {
		color: #f57f17;
	}

	.nav-icon {
		width: 24px;
		height: 24px;
		margin-bottom: 5px;
	}
</style>